<template>
    <div class="confirm">
        <el-tabs type="border-card" v-model="item.activeName">
            <el-tab-pane :label="item.label"
                         :name="item.activeName"
                         style="background: white">
                <el-form v-show="activeName == 'dDetail'"
                         label-width="120px"
                         class="demo-ruleForm"
                         :rules="rules"
                         ref='detailForm'
                         :model="addDetail">
                    <el-form-item label='计费项目名称：'>
                        <span v-text="addDetail.payname" ></span>
                    </el-form-item>
                    <el-form-item label='项目优先级：' style="width: 100%">
                        <div v-html="addDetail.paylevel"></div>
                    </el-form-item>
                    <el-form-item label='项目用量/时长：' style="width: 100%">
                        <div v-html="addDetail.paynum"></div>
                    </el-form-item>
                    <el-form-item label='项目价格：' style="width: 100%">
                        <div v-html="addDetail.paymoney"></div>
                    </el-form-item>
                    <el-form-item label='通知状态：' style="width: 100%">
                        <div>{{addDetail.paystatus | status}}</div>
                    </el-form-item>
                    <el-form-item label='通知人：' style="width: 100%">
                        <div v-html="addDetail.username"></div>
                    </el-form-item>
                    <el-form-item label='通知内容：' style="width: 100%">
                        <div v-html="addDetail.paycontent"></div>
                    </el-form-item>
<!--                    <div>-->
<!--                        <el-radio v-model="radio" label="1" disabled><img src="../../../../assets/images/zfb1.png" alt="" style="width: 100px;height: 100px;margin-left: 20px;"></el-radio>-->
<!--                        <el-radio v-model="radio" label="2" border>备选项2</el-radio>-->
<!--                    </div>-->
                </el-form>
                <el-form :model="addDetail" :rules="rules" ref='detailForm' label-width="120px" class="demo-ruleForm" v-show="activeName != 'dDetail'">
                    <div class="row">
                        <el-form-item label="计费项目名称" prop="payname">
                            <el-input v-model="addDetail.payname" ></el-input>
                        </el-form-item>
                        <el-form-item label='项目优先级' prop='paylevel'>
                            <el-input v-model="addDetail.paylevel" ></el-input>
                        </el-form-item>
                        <el-form-item label='项目用量/时长' prop='paynum'>
                            <el-input v-model="addDetail.paynum" ></el-input>
                        </el-form-item>
                        <el-form-item label='项目价格' prop='paymoney'>
                            <el-input v-model="addDetail.paymoney" ></el-input>
                        </el-form-item>
                        <el-form-item label="通知状态" prop="paystatus">
                            <el-select v-model="addDetail.paystatus"  placeholder="请选择状态">
                                <el-option v-for="item in statusList"
                                           :label="item.text"
                                           :key="item.value"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="计费目录" prop="c_id">
                            <el-select v-model="addDetail.c_id"  placeholder="请选择状态">
                                <el-option v-for="item in typeList"
                                           :label="item.text"
                                           :key="item.value"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="通知内容" style="width: 90%">
                            <vue-ueditor-wrap v-model="addDetail.paycontent" :config="myConfig"></vue-ueditor-wrap>
                        </el-form-item>
                    </div>
                </el-form>
                <div class="success-button">
                    <el-button type="primary"
                               z-index="100"
                               :disabled='false'
                               class="fa fa-mail-reply"
                               @click="back">&nbsp;返回&nbsp;&nbsp;
                    </el-button>
                    <el-button type="primary"
                               z-index="100"
                               class="fa fa-save"
                               :loading="addLoading"
                               v-show="activeName != 'dDetail'"
                               @click="save(false)">&nbsp;保存&nbsp;&nbsp;
                    </el-button>
                    <el-button type="primary"
                               z-index="100"
                               icon="el-icon-s-promotion"
                               :loading="addLoading"
                               v-show="activeName != 'dDetail'"
                               @click="save(true)">&nbsp;提交&nbsp;&nbsp;
                    </el-button>
<!--                    <el-button type="primary"-->
<!--                               z-index="100"-->
<!--                               class="fa fa-save"-->
<!--                               v-show="activeName == 'dDetail'"-->
<!--                               @click="edit">&nbsp;编缉&nbsp;&nbsp;-->
<!--                    </el-button>-->
                    <!--                    <el-button type="primary"-->
                    <!--                               z-index="100"-->
                    <!--                               class="fa  fa-paper-plane-o"-->
                    <!--                               :disabled="off"-->
                    <!--                               @click="save(true)">&nbsp;提交&nbsp;&nbsp;-->
                    <!--                    </el-button>-->
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import VueUeditorWrap from 'vue-ueditor-wrap'
    export default {
        name: "payAdd",
        components: {
            VueUeditorWrap,
        },
        data(){
            return{
                radio:'1',
                addDetail:{
                    payname: '',
                    paylevel: '',
                    paynum: '',
                    paymoney: '',
                    paystatus: '',
                    c_id: '',
                    paycontent: '',
                },
                statusList:[
                    {
                        value: 1,
                        text: '已通知'
                    },
                    {
                        value: 2,
                        text: '未通知'
                    }
                ],
                typeList:[
                    {
                        value: 7,
                        text: '电费目录'
                    },
                    {
                        value: 8,
                        text: '水费固定月目录'
                    },
                    {
                        value: 9,
                        text: '水费按量目录'
                    },
                    {
                        value: 10,
                        text: '天然气目录'
                    },
                    {
                        value: 11,
                        text: '物业费费目录'
                    },
                    {
                        value: 12,
                        text: '宽带费目录'
                    },

                ],
                // status:{
                //   1:'已建成',
                //   2:'未建成'
                // },
                item:{
                    type:'ADD',
                    label:'新增计费项目',
                    name:'addDetail'
                },
                activeName: 'addDetail',
                loading:false,
                addLoading:false,
                rules:{
                    payname:[
                        {required: true, message: '计费项目不能为空', trigger: 'blur'}
                    ],
                    paylevel:[
                        {required: true, message: '项目级别不能为空', trigger: 'blur'}
                    ],
                    paynum:[
                        {required: true, message: '项目用量/时长不能为空', trigger: 'blur'}
                    ],
                    paymoney:[
                        {required: true, message: '项目价格不能为空', trigger: 'blur'}
                    ],
                    paystatus:[
                        {required: true, message: '通知状态不能为空', trigger: 'change'}
                    ],
                    c_id:[
                        {required: true, message: '项目目录不能为空', trigger: 'blur'}
                    ],

                },
                myConfig: {
                    toolbars: [[
                        'fullscreen', 'source', '|', 'undo', 'redo', '|',
                        'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', '|',
                        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                        'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                        'directionalityltr', 'directionalityrtl', 'indent', '|',
                        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                        'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                        'emotion', 'map', 'insertcode', 'background', '|',
                        'horizontal', 'date', 'time', 'spechars', '|',
                        'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', '|',
                        'print', 'preview',
                    ]],
                    autoHeightEnabled: false,// 编辑器不自动被内容撑高
                    initialFrameHeight: 400, // 初始容器高度
                    initialFrameWidth: '100%',// 初始容器宽度
                    serverUrl:'',
                    UEDITOR_HOME_URL: '/UEditor/',
                    maximumWords:'100000000'
                },
            }
        },
        created(){
            this.getParams();
        },
        // 数字转中文过滤
        filters:{
            status(value){
                if (value == '1'){
                    return '已通知'
                } else {
                    return '未通知'
                }
            }
        },

        methods: {
            // 判断类型
            getParams() {
                //规则编码
                let type = this.$route.query.type;
                this.detailId = this.$route.query.detailId+'';
                this.addDetail.paystatus = this.$route.query.paystatus
                if (type == 'ADD') {
                    this.activeName = 'addDetail';
                } else if (type == 'DETAIL') {
                    this.activeName = 'dDetail';
                    this.item.label = '计费项目查看';
                    this.getDetail()
                }
            },
            // 返回
            back(){
                this.$router.go(-1)
            },
            // 保存
            save(bool){
                this.$refs['detailForm'].validate((valid)=>{
                    if (!valid){
                        this.$message.error({
                            message: "新增信息不能为空",
                            duration: 2000
                        });
                    } else {
                        this.$confirm('确认保存计费信息？','提示',{}).then(()=>{
                            this.addLoading = true;
                            this.$axiosToken({
                                url: '/cost/addCostData',
                                method: 'post',
                                data:{
                                    payname: this.addDetail.payname,
                                    paylevel: this.addDetail.paylevel,
                                    paynum: this.addDetail.paynum,
                                    paymoney: this.addDetail.paymoney,
                                    paystatus: this.addDetail.paystatus,
                                    c_id: this.addDetail.c_id,
                                    paycontent: this.addDetail.paycontent,
                                    coststatus: 2
                                },
                                success: (result)=>{
                                    this.$message({
                                        message: '计费项目新增成功',
                                        type: 'success',
                                        duration: 2000
                                    });
                                    setTimeout(()=>{
                                        this.addLoading = false
                                    },200);
                                    this.back()
                                }
                            });
                        })

                    }
                })
            },
            // 提交
            // submit(){
            //     this.save();
            //     this.$router.go(-1)
            // },

            // 获取详情页
            getDetail(){
                console.log(this.detailId,'获取id');
                const id = this.detailId;
                // console.log(this.result,1111)
                this.$axiosToken({
                    url: '/cost/getCostDetail',
                    method: 'get',
                    data:{id},
                    success:(result)=>{
                        this.addDetail.payname = result[0].payname;
                        this.addDetail.paylevel = result[0].paylevel;
                        this.addDetail.paynum = result[0].paynum;
                        this.addDetail.paymoney = result[0].paymoney;
                        this.addDetail.username = result[0].username;
                        // this.status转化为文字
                        this.addDetail.paystatus = result[0].paystatus;
                        this.addDetail.paycontent = result[0].paycontent;
                        console.log(this.addDetail,1111)
                    },

                })
            },
        }
    }
</script>

<style scoped>
    .row{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    /deep/ .el-form-item{
        width: 44%;
        padding-left: 20px;
    }
    /deep/ .el-input{
        width: 100%;
    }
    /deep/ .el-input__inner{
        font-size: 14px;
        height: 36px;
    }
    /deep/ .el-button{

    }
    .el-select{
        width: 100%;
    }
    .success-button{
        position: fixed;
        top: 27%;
        right: 20px;
        z-index: 100;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .success-button>.el-button{
        width: 85px;
        margin-bottom: 15px;
        border-radius: 4px;
        font-size: 14px;
        padding: 10px 15px
    }
    .success-button>.el-button:nth-child(1){
        margin-left: 10px;
    }
    /deep/.el-button [class*=el-icon-]+span {
        margin-left: 0px;
    }

</style>